<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

	<style type="text/css">
		body,
		html {
			width: 100%;
			height: 100%;
			margin: 0;
			font-family: "微软雅黑";
		}

		#allmap {
			width: 100%;
			height: 100%;
		}

		p {
			margin-left: 5px;
			font-size: 14px;
		}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=VeNlX17jPLxeiO4BzoL5rb1nyULo4LA9"></script>

	<script type="text/javascript"
		src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

	<script type="text/javascript"
		src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

	<title>点聚合</title>
</head>

<body>
	<div id="allmap"></div>
	<!-- <p>缩放地图，查看点聚合效果</p> -->
</body>

</html>

<script type="text/javascript">
	
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(106.512321,29.594555), 10);
	map.enableScrollWheelZoom();
	var MAX = []
	function ToManualRoamFunc(e) {
		if (e) {
			MAX = e
			var pt = null;
			var i = 0;
			var markers = [];
			var arrayList = [];
			for (i = 0; i < MAX.length; i++) {
				pt = new BMap.Point(MAX[i].lng, MAX[i].lat);
				markers.push(new BMap.Marker(pt));
				arrayList.push(pt);
			}
			
			//创建聚合地图
			var markerClustererC = new BMapLib.MarkerClusterer(map, { markers: markers });
			//到一定级别时显示文字
			map.addEventListener("zoomend", function (e) {
				let zoom = map.getZoom(); // 获取缩放级别
				console.log(zoom)
				if (zoom > 8) {
					let add = []
					MAX.forEach((item, i) => {
						add.push(new BMap.Point(item.lng, item.lat))
					});
					add.forEach((item, i) => {
						var marker = new BMap.Marker(item);
						map.addOverlay(marker);
						var label = new BMap.Label('司机：' + MAX[i].driver_name + ',电话：' + MAX[i].phone_number, { offset: new BMap.Size(20, -10) });
						marker.setLabel(label);
					});
				} else if (zoom < 8) {
					markers = []
					map.clearOverlays()
					for (i = 0; i < MAX.length; i++) {
						pt = new BMap.Point(MAX[i].lng, MAX[i].lat);
						markers.push(new BMap.Marker(pt));
					}
					var markerClustererC = new BMapLib.MarkerClusterer(map, { markers: markers });
				}
			});
		}
	}


</script>